<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>问卷星登录页面</title>
		<style type="text/css">
			body {
				background-image: url(img/问卷星.jpg);
				background-repeat: no-repeat;
			}

			.wrap {
				width: 1650px;
				height: 675px;
				float: left;
				margin-left: 36px;
				margin-top: 20px;
				color: blue;
			}

			.pull-right {
				width: 250px;
				height: 60px;
				float: right;
				margin-top: -670px;
				background-color: aliceblue;
				background: transparent;
			}

			.r1 {
				width: 70px;
				height: 40px;
				background-color: transparent;
				font-size: 18px;
				color: white;
				border: #87CEEB;
				float: left;
				margin-left: -2;
				border: 1px solid #FFFFFF;
				text-align: center;
				margin-top: 20px;
			}

			.r2 {
				width: 100px;
				height: 40px;
				border: #87CEEB;
				font-size: 18px;
				color: #FFFFFF;
				background-color: transparent;
				float: right;
				margin-right: 40px;
				border: 1px solid #FFFFFF;
				text-align: center;
				margin-top: 18px;
			}

			.footer {
				width: 240px;
				height: 50px;
				background-color: transparent;
				font-size: 16px;
				color: azure;
				float: right;
				margin-top: 140px;
				margin-right: 20px;
			}

			.content {
				width: 480px;
				height: 555px;
				background-color: white;
				position: absolute;
				top: 160px;
				left: 35%;
			
			}



			.c1-1 {
				width: 400px;
				height: 60px;
				margin-left: 25px;
				margin-bottom: 10px;
				background-color: transparent;
			}

			.c1-1-left {
				width: 100px;
				height: 35px;
				background-color: transparent;
				margin-top: 20px;
				font-size: 20px;
				text-align: center;
				position: absolute;
				line-height: 0px;
			}

			.c1-1-right {
				width: 110px;
				height: 35px;
				background-color: transparent;
				font-size: 20px;
				text-align: center;
				margin-top: -40px;
				float: right;
				margin-left: 180px;
				position: absolute;
			}

			.c2 {
				width: 430px;
				height: 35px;
				border: 1px solid black;
				margin-top: 35px;
				text-align: left;
				line-height: 35px;
			}

			.c3 {
				width: 430px;
				height: 35px;
				border: 1px solid black;
				margin-top: 20px;
				text-align: left;
				line-height: 35px;
			}

			.c4 {
				width: 430px;
				height: 45px;
				background-color: transparent;
				margin-top: 20px;
				text-align: left;
				line-height: 35px;
			}

			.c4-a {
				width: 145px;
				height: 45px;
				float: left;
				background-color: transparent;
			}

			.c4-b {
				width: 160px;
				height: 45px;
				float: right;
				background-color: transparent;
				margin-right: 10px;

			}

			.c5 {
				width: 420px;
				height: 40px;
				border: 1px solid white;
				background-color: orange;
				text-align: center;
				line-height: 35px;
				margin-top: 15px;

			}

			.c6 {
				width: 330px;
				height: 40px;
				background-color: transparent;
				color: #0095ff;
				margin-top: 15px;
				margin-left: 45px;
				text-align: center;
				font-size: 20px;
				line-height: 35px;
			}
			.c7{
				width: 390px;
				height: 50px;
			background-color: transparent;
				text-align: center;
				font-size: 12px;
				margin-top: 20px;
				margin-left: 15px;
				line-height: 50px;
				font-weight: 100;
			}
			.c7-a{
				width: 155px;
				height: 0;
				border: 1px solid gray;
				margin-top: 40px;
				margin-left: -12px;
			}
			.c7-b{
				width: 135px;
				height: 30px;
				background-color: transparent;
				margin-left: 135px;
				text-align: center;
				line-height: 30px;
				margin-top: -15px;
				font-weight: 100;
			}
			.c7-c{
				width: 155px;
				border: 1px solid gray;
				margin-left: 250px;
				margin-top: -16px;
			}
			.c8{
				width: 380px;
				height: 79px;
				margin-top: 15px;
				margin-left: 0px;
				margin-bottom: 55px;
				padding-left: 60px;
				display: flex;
				background-color:white;
			}
			.c8-qq{
				width: 48px;
				height: 76px;
				font-size: 12px;
				margin-top: 8px;
				line-height: 20px;
				color: #a6a6a6;
				margin-left: -15px;
			}
			.c8-wx{
				width: 48px;
				height: 76px;
				font-size: 12px;
				margin-top: 8px;
				line-height: 20px;
				color: #a6a6a6;
				margin-left: 92px;
			}
			.c8-qywx{
				width: 48px;
				height: 76px;
				font-size: 12px;
				margin-top: 8px;
				line-height: 20px;
				color: #a6a6a6;
				margin-left: 95px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- 左上角 -->
			<div class="wrap">
				<a href="#"><img src="img/wjx-logo@2x.png" style="width: 130px;height: 50px;"></a>
			</div>
			<!-- 右上角 -->
			<div class="pull-right">
				<div class="r1"><a>注册</a></div>
				<div class="r2"><a>返回首页</a></div>
			</div>

			<!-- 中间部分 -->
			<div class="content">

				<div class="c1-1">
					<div class="c1-1-left">
						<p>账号登录</p>
						<div class="c1-1-right">
							<p>验证码登录</p>
						</div>
						<div class="c2">
							<a>用户/email/手机</a></div>
						<div class="c3"><a>请输入登录密码</a></div>
						<div class="c4">
							<div class="c4-a">
								<input type="checkbox" name="gxh" /><span>下次自动登录</span></div>
							<div class="c4-b"><u>忘记用户密码/？</u></div>
						</div>
						<!-- 登录 -->
						<div class="c5"><a style="color: #FFFFFF;">登录</a></div>
						<div class="c6">
							<a href="/">立即注册</a>
						</div>
						<div class="c7">
							<div class="c7-a">
								<div class="c7-b">更多登录方式</div>
								<div class="c7-c">	
								</div>
							</div>
						</div>
						<div class="c8">
							<div class="c8-qq">
							<img src="img/qq.png" width="65px" height="75px" ></div>
							<div class="c8-wx"><img src="img/wx.png" width="65px" height="78px"></div>
							<div class="c8-qywx"><img src="img/qywx.png"  width="65px" height="75px"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 右下角 -->
			<div class="footer">
				《登武功山》<br>拍摄于问卷星团队二月徒步之旅
			</div>
		</div>
	</body>
</html>
